<template>
  <div id="app">
    <HeaderUI :seller="seller"></HeaderUI>
	<div class="tab border-1px">
		<div class="tab-item">
			<router-link to="/">商品</router-link>
		</div>
		<div class="tab-item">
			<router-link to="/ratings">评价</router-link>
		</div>
		<div class="tab-item">
			<router-link to="/seller">商家</router-link>
		</div>
	</div>
	<router-view :seller="seller"></router-view>
  </div>
</template>
<script>
	import HeaderUI from "@/components/HeaderUI.vue"
	import axios from 'axios'
	export default{
		name:'app',
		data(){
			return{
				seller:{}
			}
		},
		components:{
			HeaderUI
		},
		created(){
			axios.get('./data.json').then(res=>{
				//console.log(res)
				this.seller=res.data.seller
			})
		}
	}
</script>
<style lang="scss">
	@import 'common/style/mixin.scss';
	#app{
		.tab{
			display: flex;
			height: 40px;
			line-height: 40px;
			width: 100%;
			@include border-1px(rgba(7,17,27,0.1));
			.tab-item{
				flex: 1;
				text-align: center;
				&>a{
					display: block;
					font-size: 14px;
					font-weight: 200;
					color: rgb(77,85,93);
				}
				.router-link-exact-active{
					color: rgb(240,20,20);
				}
			}
		}
	}
</style>
